<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML>
<html>
<head>
    <title>孟孟哒个人博客 — 专治各种不服BUG</title>
    <meta charset="UTF-8">
</head>
<body>
<jsp:include page="common/header.jsp"/>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/media/css/timeline.css"/>
<!--导航条-->
<nav class="breadcrumb">
    <div class="container"><i class="Hui-iconfont">&#xe67f;</i> <a href="<%=request.getContextPath()%>/blog/list.html"
                                                                   class="c-primary">首页</a> <span
            class="c-gray en">&gt;</span> <span class="c-gray">闲言碎语</span></div>
</nav>
<section class="container mt-20">
    <div class="container-fluid">
        <div class="timeline">
        </div>
        <div id="page"></div>
    </div>
</section>
<jsp:include page="common/footer.jsp"/>
<script>
    $(function () {
        moreShuo();
        //on scolling, show/animate timeline blocks when enter the viewport
        $(window).on('scroll', function () {
            $('.cd-timeline-block').each(function () {
                if ($(this).offset().top <= $(window).scrollTop() + $(window).height() * 0.75 && $(this).find('.cd-timeline-img').hasClass('is-hidden')) {
                    $(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
                }
                if ($(window).scrollTop() - $(this).offset().top > 0) {
                    $(this).find('.cd-timeline-img, .cd-timeline-content').addClass('is-hidden').removeClass('bounce-in');
                }

            });
            $('.cd-timeline-block').each(function () {
                if ($(this).offset().top < $(window).scrollTop() + $(window).height() * 0.75) {
                    $(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden');
                }
            });

            if ($("#page").offset().top - $(window).scrollTop() - 20 < $(window).height()) {
                //当底部基本距离+滚动的高度+文档的高度>窗体的高度时；
                //我们需要去异步加载数据了
                moreShuo();
            }
        });
    });
    var pageNo = 1;
    var isLastPage = false;
    var lastPage = 0;

    function moreShuo() {
        if (isLastPage) {
            $("#bottom").html("没有更多了亲");
            return;
        }
        if (lastPage == pageNo) {
            return;
        }
        lastPage = pageNo;
        $.ajax({
            url: '<%=request.getContextPath()%>/mood/list.html',
            data: 'pageNo=' + pageNo,
            method: "post",
            success: function (data) {
                $.each(data.list, function (index, obj) {
                    var str = '<div class="cd-timeline-block"><div class="cd-timeline-img cd-picture">' +
                        '<img src="<%=request.getContextPath()%>/media/css/timeline/cd-icon-location.svg" alt="position">' +
                        '</div><div class="cd-timeline-content"><p>' + obj.content + '</p>' +
                        '<span class="cd-date">' + obj.createdDate + '</span></div></div>';
                    $(".timeline").append(str);
                })
                pageNo++;
                isLastPage = data.isLastPage;
            }
        })

    }
</script>
</body>
</html>
